<template>
  <el-dialog title="查看"
             v-model="visible"
             @close="close"
             width="1000px"
             :close-on-click-modal="false">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-radio-group v-model="queryParam.status" @change="handleQuery">
          <el-radio-button v-for="item in Dic.stockOrderStatus()"
                           :key="item.value"
                           :label="item.text"
                           :value="item.value"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryParam.dateArray"
                        :shortcuts="Dic.DateShortcuts"
                        @change="handleQuery"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.list" v-loading="loading" border>
      <el-table-column label="单号" prop="ptSn" min-width="160" align="center"/>
      <el-table-column label="数量" prop="ptCount" width="90" align="center"/>
      <el-table-column label="金额" prop="ptThprice" min-width="100" align="center"/>
      <el-table-column label="待付金额" prop="ptBackAmount" min-width="100" align="center" :formatter="tableRed"/>
      <el-table-column label="备注" prop="ptText" min-width="150" align="center"/>
      <el-table-column label="状态" prop="jsStatus" width="80" align="center" :formatter="Dic.stockOrderStatus"/>
    </el-table>
    <el-pagination layout="->,total,sizes,prev,pager,next,jumper"
                   v-model:current-page="queryParam.page"
                   v-model:page-size="queryParam.limit"
                   :total="tableData.total" background
                   @current-change="loadList"
                   @size-change="loadList"/>
    <template #footer>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import supplierApi from "@/api/supplier";
import base from "@/utils/base";

export default {
  name: "listWithBackSheetDetail",
  mixins: [base],
  props: {
    info: {},
    close: {
      required: true,
      type: Function,
    },
    refresh: {
      required: true,
      type: Function,
    }
  },
  data() {
    return {
      visible: false,
      queryParam: {
        page: 1,
        limit: 10,
        supplierId: '',
        status: '',
        dateArray: []
      },
      tableData: {
        list: [],
        total: 0,
      },
      loading: false,
    };
  },
  watch: {
    info(value) {
      this.visible = value
      let {supplierId, dateArray, status} = this.info
      if (supplierId) {
        this.queryParam = {...this.queryParam, supplierId, dateArray, status};
        this.loadList();
      }
    },
  },
  methods: {
    handleQuery() {
      this.queryParam.page = 1;
      this.loadList();
    },
    loadList() {
      this.loading = true;
      supplierApi.backSheetList(this.queryParam).then(res => {
        console.log(res.data)
        this.loading = false;
        this.tableData = res.data
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
</style>